<template>
  <div class="hawkContent">
    <hawk-breadcrumb></hawk-breadcrumb>
    <el-row :gutter="20" style="padding-left: 20px;">
      <el-col :span="4" style="display:flex;align-items: center;">
        <span style="width:60px;">名称</span>
        <el-input v-model="queryForm.query.name"
                  placeholder="请输入业务系统名称搜索"></el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="hawkSearch" @click="init(true)">搜索</el-button>
        <el-button plain @click="reSet">重置</el-button>
      </el-col>
      <el-col :span="4"
              style="float: right;text-align: right;padding-right: 30px">
      </el-col>
    </el-row>
    <hawk-table :selection="false" :table-data="tableData" :options="[
        { key: 'name', label: '业务系统名称' },
        { key: 'hostCount', label: '主机数量' },
        { key: 'problemCount', label: '问题数量' },
        { key: 'handle', label: '操作' },
      ]">

      <template #problemCount="{ row }">
        <!-- @click="probJump(row)" -->
        <span class="host" >{{row.problemCount?row.problemCount:0}}</span>
      </template>

      <template #hostCount="{ row }">
        <span class="host">{{row.hostCount}}</span>
      </template>

      <template #handle="{ row }">
        <span @click='goViewport(row)' class="host">查看拓扑</span>
      </template>

    </hawk-table>

    <div class='bottom-btns' style="float:right;">
      <el-pagination background @size-change='handleSizeChange'
                     @current-change='handleCurrentChange'
                     :current-page.sync='queryForm.page.current'
                     :page-sizes='[10, 20, 50, 100]'
                     :page-size='queryForm.page.size'
                     layout=' prev, pager, next,sizes' :total='total'>
      </el-pagination>
    </div>
  </div>
</template>

<script>
/**
* @author 韩玉龙
* @description 业务系统的视图层
* @api 
* @since 2021-10-10 17:30
* @update 2021-10-12 15:00
* @modifier 
* @bug 
* @version V1.0.0
 */
import { getList as search } from '@/api/monitor/list/business.js'

import HawkBreadcrumb from '@/components/breadcrumb/Breadcrumb'

import { getList as getAllBusCI } from '@/api/assets/ci/room'

export default {
  components: { HawkBreadcrumb },
  //import引入的组件需要注入到对象中才能使用",
  data () {
    return {
      tableData: [],
      formTitle: '添加业务系统',
      addDialogVisible: false,
      multipleSelection: [],
      total: 0,
      queryForm: {
        query: {
          name: '',
        },
        page: {
          current: 1,
          size: 10
        }
      },

      ciBusList: []
    }
  },
  //监听属性 类似于data概念",
  computed: {
    cellStyle () {
      return {
        padding: '8px 0'
      }
    }
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    // 跳转拓扑方法
    goViewport (row) {


      // this.$router.push({ name: 'topology', params: { id: row.id } })

      console.log(this.ciBusList)
      // this.$router.push({ name: 'item', params: { id: row.id, type: 1 } })
      console.log(row);


      let destCI = this.ciBusList.find(item => {
        return item.busid == row.id
      })

      console.log(destCI);
      if (destCI == undefined) {
        this.$msg({
          type: 'warn',
          message: '所选业务系统没有视图'
        })
        return
      }

      this.$router.push({
        name: 'businessCIName',
        // params: { id: row.id, type: 1 },
        params: destCI,
      })


    },
    async getCIBusList () {
      const ret = await getAllBusCI({
        query: {
          name: '',
          type: 1
        },
        page: {
          current: 1,
          size: 10000
        }
      })

      console.log(ret);

      if (ret.code == 20000) {

        let ciList = ret.data

        this.ciBusList = []
        // 根据视图列表，获得有 视图的 机房列表
        for (let i = 0; i < ciList.length; i++) {
          let nodeList = ciList[i].nodeList // nodeList 中只有一个是机房

          for (let node of nodeList) {
            if (node.nodeType == 'sys') {
              this.ciBusList.push({
                busid: node.viewData.id, // 业务ID
                busName: node.viewData.name,
                ciId: ciList[i].id, // 视图ID
                ciName: ciList[i].name, // 视图名字
                ciName2: ciList[i].ciName, // 视图名字

              })
            }
          }
        }

        // console.log(this.ciRoomList);
      }

    },

  //跳转问题列表
    probJump (row) {
      if(row.problemCount  == 0){
        this.$message({
          type:'warn',
          message:'主机正常'
        })
        return
      }
      console.log( row.name );
      this.$router.push({ path: '/alarm/list', params: { name: row.name } })
    },

    //跳转主机方法
    hostJump (row) {
      if(row.hostCount == 0){
        this.$message({
          type:'warn',
          message:'没有添加主机'
        })
      return
      }
      this.$router.push({ name: 'host', params: { id: row.id } })
    },
    reSet () {
      this.queryForm = this.$options.data().queryForm
      this.init()
    },

    async init (type) {
      // console.log("搜索")
      console.log(this.queryForm.query.businessName)

      if (type) this.queryForm.page.current = 1


      const res = await search(this.queryForm)
      console.log(res);
      if (res.code == 20000) {

        this.tableData = res.data.records
        this.total = res.data.total
      }

      this.getCIBusList() // 获得所有业务视图
    },


    handleSizeChange (val) {
      this.queryForm.page.size = val
      this.init()
    },
    handleCurrentChange (val) {
      this.queryForm.page.current = val
      this.init()
    },
    addDialogClosed () {
      this.addDialogVisible = false
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate () { },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {
    this.init()
  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted () { }
}
</script>

<style lang="scss">
.host:hover {
  cursor: pointer;
}
.hawkContent {
  width: calc(100% - 40px);
  min-height: calc(100vh - 140px);
  background: #fff;
  padding: 20px;
  border-radius: 8px;

  .inputLabel {
    font-size: 14px;
    color: #333333;
  }

  .bottom-btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-top: 10px;

    &-left {
      display: flex;
      align-items: center;

      &-num {
        margin-right: 10px;
        color: #333333;
        font-size: 14px;
      }
    }
  }
}
</style>
